<template>
  <view class="page">
    <view class="top">
      <view class="top-box">
        <view class="top-box-title">
          {{ obj.title }}
        </view>
        <!-- <view class="flex-1"> <span>PK竞技</span><span>沉浸体验</span><span>助跑新人</span><span>领导力提升</span> </view>
        <view class="flex" style="margin-top: 47rpx;">
          <image src="" mode="scaleToFill" class="header-img" />
          <view class="flex-right flex">
            <view class="flex-right-1 white">
              YLearning云何学习
              <view class="right-1-1">6人关注</view>
            </view>
            <view class="gz active">关注</view>
            <view class="gz">进入主页</view>
          </view>
        </view> -->
        <view class="item-eys">
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-16.png" mode="scaleToFill" />{{ obj.click
          }}
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-37.png" mode="scaleToFill"
            style="margin-left: 40rpx" />{{ obj.collect }}
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-38.png" mode="scaleToFill"
            style="margin-left: 40rpx" />{{ obj.up }}
        </view>
      </view>
    </view>
    <view class="detail-box">
      <view class="detail-title">方案概览</view>
      <image :src="item" mode="scaleToFill" v-for="(item, index) in preview" :key="index" class="detail-img"
        @click="showFullscreen(index)" />
      <view class="box" v-if="obj.price_type == 2">
        <view class="box-1" @click="handleDown">付费看完</view>
        <view class="box-2">本方案共{{ obj.preview.length }}页，{{ try_see }}页试看已结束</view>
        <view class="box-2">购买后可在线观看，永久回看。</view>
      </view>
      <view class="box" v-else>
        <view class="box-1">免费看完</view>
        <view class="box-2">本方案共{{ obj.preview.length }}页，会员可免费观看</view>
      </view>
      <view class="vip" @click="handleNav('/pagesB/vip/index')">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-30.png" mode=""></image>
        <view class="vip-title">开通蚂蚁团建VIP,立即享受费用折扣</view>
      </view>
      <view class="box-item">
        价格：<span v-if="obj.price_type == 1">vip 免费</span> <span
          style="font-style:normal;color: #AAAAAA;font-size: 26rpx;background: transparent;">￥{{ obj.people_price
          }}</span>
      </view>
      <view class="box-item">
        免费浏览：{{ try_see }}页
      </view>
      <!-- <view class="box-item">
        活动类型：经典拓展,联谊活动,轰趴聚会,情景主题
      </view> -->
      <view class="box-item">
        文件格式：PDF
      </view>
      <view class="box-item">
        发布时间：{{ obj.created_at }}
      </view>
      <view class="box-item">
        推荐产品：{{ obj.title }}
      </view>
      <view class="box-item">
        作品介绍：
      </view>
    </view>
    <view class="dian flex">
      <view class="cir flex" :style="{ 'background': obj.is_up == 1 ? '#ffb850' : '#ccc' }" @click="handleSchemeUp">
        <u-icon name="thumb-up-fill" color="#ffffff" size="20"></u-icon>
      </view>
      {{ obj.up }}赞
    </view>
    <view class="detail-box">
      <view class="detail-title">方案评价</view>
      <view class="flex" style="border-bottom: 1rpx solid#f2f2f2;">
        <view class="box-flex flex">
          <view class="box-flex-right">
            {{ evaluate_data.evaluate_avg }}/5
            <u-rate active-color="#FFB850" count="5"></u-rate>
            <view class="flex-p">{{ evaluate_data.evaluate_total }}条评价</view>
          </view>
          <view>
            <view class="flex-r flex">
              <image :src="imgApi + 'images/wallet/icon-10.svg'" mode="scaleToFill" v-for="(item, index) in 5"
                :key='index' />
              <view class="flex-r-1-c"></view>
            </view>
            <view class="flex-r flex">
              <image :src="imgApi + 'images/wallet/icon-10.svg'" mode="scaleToFill" v-for="(item, index) in 4"
                :key='index' />
              <view class="flex-r-1-c"></view>
            </view>
            <view class="flex-r flex">
              <image :src="imgApi + 'images/wallet/icon-10.svg'" mode="scaleToFill" v-for="(item, index) in 3"
                :key='index' />
              <view class="flex-r-1-c"></view>
            </view>
            <view class="flex-r flex">
              <image :src="imgApi + 'images/wallet/icon-10.svg'" mode="scaleToFill" v-for="(item, index) in 2"
                :key='index' />
              <view class="flex-r-1-c"></view>
            </view>
            <view class="flex-r flex">
              <image :src="imgApi + 'images/wallet/icon-10.svg'" mode="scaleToFill" v-for="(item, index) in 1"
                :key='index' />
              <view class="flex-r-1-c"></view>
            </view>
          </view>
        </view>

      </view>
      <view class="flex-2" @click="showPop = true">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-41.svg" />
        <u-input placeholder="说点什么吧" confirmType="发送" adjustPosition border="32rpx"></u-input>
      </view>
      <view class="tall-list" style="width: 92%;margin: 20rpx auto;" v-if="commentList.length > 0">
        <view class="tall-item" v-for="item in commentList" :key="item.id"><span>{{ item.username }}：</span>{{
          item.message }}</view>
      </view>
    </view>
    <view class="detail-box">
      <view class="detail-title">推荐方案</view>
      <view class="item" v-for="(item, index) in recommend_list" :key="index" @click="detail(item)">
        <image :src="showImgApi + item.img" mode="scaleToFill" class="img" />
        <view class="item-bottom">
          <view class="title"> {{ item.title }}</view>
          <!-- <view class="flex-1"> 
            <span>PK竞技</span><span>沉浸体验</span><span>助跑新人</span><span>领导力提升</span> 
          </view> -->
          <!-- <view class="flex-2">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-39.svg" mode="scaleToFill" />徐奋斗
          </view> -->
        </view>
        <view class="item-1">
          <view class="type-2">
            <!-- <span>vip 免费</span> -->
            ￥{{ item.people_price }}
          </view>
          <view class="item-eys">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-16.png" mode="scaleToFill" />{{
              item.click }}
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-37.png" mode="scaleToFill"
              style="margin-left: 40rpx" />{{ item.collect }}
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-38.png" mode="scaleToFill"
              style="margin-left: 40rpx" />{{ item.up }}
          </view>
        </view>
      </view>
    </view>
    <view class="kong" style="height: 200rpx;"></view>
    <view class="bottom-fix">
      <view class="fix-item">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-47.jpg" />
        分享
        <button type="default" open-type="share"></button>
      </view>
      <view class="fix-item" @click="handleCollect">
        <image :src="imgApi + 'images/wallet/icon-10.svg'" v-if="obj.is_collect == 1" />
        <image :src="imgApi + 'images/wallet/icon-11.svg'" v-else />
        收藏
      </view>
      <block v-if="obj.is_buy == 2">
        <view class="fix-btn" @click="handleDown">{{ obj.price_type == 1 ? '免费' : '付费' }}看完</view>
        <view class="fix-btn active" @click="handleDown">{{ obj.price_type == 1 ? '免费' : '付费' }}下载</view>
      </block>
      <block v-else>
        <view class="fix-btn" @click="showFullscreen(0)">阅读</view>
        <view class="fix-btn active" @click="handleDownLoad">下载</view>
      </block>
    </view>
    <u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open" closeable>
      <view class="pop-box">
        <view class="pop-box-title">购买作品</view>
        <view class="pop-tip">确认花费{{ obj.people_price }}</view>
        <view class="pop-tip" style="margin-top: 16rpx;">点击支付，完成购买</view>
        <view class="vip">
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-30.png" mode=""></image>
          <view class="vip-title">开通蚂蚁团建VIP,立即享受费用折扣</view>
        </view>
        <view class="slot-flex" @click="handlePayType(1)" v-if="type === 'points'">
          <view class="slot-1">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-48.svg" class="ji"
              style="width: 50rpx;height: 50rpx;margin-left: 20rpx;margin-right: 16rpx;" />
            积分兑换
          </view>
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-19.png" class="xuan" v-if="payType == 1" />
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-18.png" class="xuan" v-else />
        </view>
        <view class="slot-flex" @click="handlePayType(2)" v-if="type === 'points'">
          <view class="slot-1">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-50.svg" class="ji" />
            旺币支付
          </view>
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-19.png" class="xuan" v-if="payType == 2" />
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-18.png" class="xuan" v-else />
        </view>
        <view class="gm" @click="handleNav('/pagesB/my/programme')">购买后可在 <span>我的方案</span>中浏览</view>
        <view class="pop-bottom flex">
          <view class="pop-bottom-1 flex">总计:
            <!-- <span>vip 359.1</span> -->
            <view class="wb">￥{{ obj.people_price }}</view>
          </view>
          <view class="pop-bottom-btn" @click="handlePay">立即支付</view>
        </view>
      </view>
    </u-popup>
    <u-popup :show="showSuccess" :round="10" mode="bottom" @close="closeSuccess" @open="open" closeable>
      <view class="pop-box">
        <view class="pop-box-title">购买成功</view>
        <view class="pop-tip">购买成功，请登录电脑端下载该作品</view>
        <view class="pop-tip" style="margin-top: 16rpx;">https://www.atuanjian.com/</view>
        <view class="pop-tip pop-copy" @click="handleCopy">复制链接</view>
        <view class="gm" @click="handleNav('/pagesB/my/programme')">稍后也可在 <span>我的方案</span>中浏览</view>
        <view class="btn" @click="closeSuccess">好的</view>
      </view>
    </u-popup>
    <!-- 全屏预览 -->
    <div v-if="isFullscreen" @click="closeFullscreen" class="fullscreen-mask">
      <div class="fullscreen-content">
        <img :src="currentImage" @click.stop />
        <button @click.stop="prevImage" v-if="currentIndex > 0">上一张</button>
        <button @click.stop="nextImage" v-if="currentIndex < images.length - 1">下一张</button>
      </div>
    </div>
    <u-popup :show="showPop" :round="12" mode="bottom" @close="showPop = false">
      <view class="pop-flex">
        <u-textarea v-model="comments" placeholder="请输入内容"></u-textarea>
        <view class="send" @click="handleSend">发送</view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import {
  schemeDetail, schemeUp, addScheme, schemeCollect, buyScheme, schemeDownload, userInfo, evaluateList, evaluateAdd
} from "@/utils/request.js";
export default {
  data() {
    return {
      imgApi: this.$config.imgApi,
      showPop: false,
      show: false,
      showSuccess: false,
      textToCopy: "https://www.atuanjian.com/",
      showImgApi: this.$config.showImgApi,
      type: "",
      payType: 1,
      obj: {},
      recommend_list: {},
      currentIndex: 0,
      isFullscreen: false,
      user_identity: '',
      evaluate_data: [],
      commentList: [],
      comments: '',
      try_see: 1,
      preview: []
    };
  },
  onLoad(options) {
    let query = { id: options.id, user_id: JSON.parse(uni.getStorageSync("userInfo")).id }
    this.schemeDetail(query).then(res => {
      if (res) {
        this.obj = res.row
        this.recommend_list = res.recommend_list
        this.evaluate_data = res.evaluate_data
        if (res.row.try_see && res.row.try_see < res.row.preview.length) {
          if (res.row.is_buy == 2) {
            this.try_see = res.row.try_see
            this.preview = res.row.preview.slice(0, res.row.try_see)
          } else {
            this.try_see = res.row.preview
            this.preview = res.row.preview
          }
        }
      }
    })
    let data = { user_id: JSON.parse(uni.getStorageSync("userInfo")).id }
    this.userInfo(data).then(res => {
      if (res) {
        this.user_identity = res.user_identity
      }
    })
    let query1 = { page: 1, limit: 10, scheme_id: options.id }
    this.evaluateList(query1).then(res => {
      if (res) {
        this.commentList = res.list
      }
    })
  },
  methods: {
    async schemeDetail(data) {
      return await schemeDetail(data);
    },
    async evaluateAdd(data) {
      return await evaluateAdd(data);
    },
    async evaluateList(data) {
      return await evaluateList(data);
    },
    async userInfo(data) {
      return await userInfo(data);
    },
    async addScheme(data) {
      return await addScheme(data);
    },
    async schemeUp(data) {
      return await schemeUp(data);
    },
    async schemeCollect(data) {
      return await schemeCollect(data);
    },
    async buyScheme(data) {
      return await buyScheme(data);
    },
    async schemeDownload(data) {
      return await schemeDownload(data);
    },
    handleSend() {
      if (!uni.getSystemInfoSync('token')) {
        uni.showToast({
          title: "请登录",
          icon: "none",
        });
        return;
      }
      if (!this.comments) {
        uni.showToast({
          title: "请输入内容",
          icon: "none",
        });
        return;
      }
      if (this.comments.length < 6 || this.comments.length > 255) {
        uni.showToast({
          title: "内容长度在6~255之间",
          icon: "none",
        });
        return;
      }
      let data = {
        user_id: JSON.parse(uni.getStorageSync("userInfo")).id,
        level: 5,
        scheme_id: this.obj.id,
        message: this.comments,
      };
      this.evaluateAdd(data).then((res) => {
        if (res) {
          uni.showToast({
            title: "已评论",
          });
          setTimeout(() => {
            this.comments = "";
            this.showPop = false;
            let query1 = { page: 1, limit: 10, scheme_id: options.id }
            this.evaluateList(query1).then(res => {
              if (res) {
                this.commentList = res.list
              }
            })
          }, 1500);
        }
      });
    },
    handleSchemeUp() {
      let data = { user_id: JSON.parse(uni.getStorageSync("userInfo")).id, id: this.obj.id, type: this.obj.is_up == 1 ? 2 : 1 }
      this.schemeUp(data).then(res => {
        if (res) {
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          })
          if (data.type == 1) {
            this.obj.is_up = 1
            this.obj.up++
          } else {
            this.obj.is_up = 2
            this.obj.up--
          }
        }
      })
    },
    closeSuccess() {
      this.showSuccess = false;
    },
    async handleCopy() {
      try {
        if (uni.getSystemInfoSync().platform === "web") {
          // H5 环境下使用 navigator.clipboard
          await navigator.clipboard.writeText(this.textToCopy);
        } else {
          // 非 H5 环境下使用 uni.setClipboardData
          await uni.setClipboardData({
            data: this.textToCopy,
            success: () => {
              uni.showToast({
                title: "复制成功",
                icon: "success",
              });
            },
            fail: () => {
              uni.showToast({
                title: "复制失败",
                icon: "none",
              });
            },
          });
        }
        uni.showToast({
          title: "复制成功",
          icon: "success",
        });
      } catch (err) {
        uni.showToast({
          title: "复制失败",
          icon: "none",
        });
      }
    },
    open() { },
    handlePay() {
      const data = { user_id: JSON.parse(uni.getStorageSync('userInfo')).id, scheme_id: this.obj.id }
      this.addScheme(data).then(res => {
        console.log(res)
        if (res) {
          const obj = {
            id: res.id,
            // #ifdef MP-WEIXIN
            platform: 2,
            // #endif
            // #ifdef H5
            platform: 1
            // #endif
          }
          this.buyScheme(obj).then(res => {
            // #ifdef MP-WEIXIN
            console.log(res)
            if (res) {
              uni.requestPayment({
                timeStamp: res.timeStamp,
                nonceStr: res.nonceStr,
                package: res.package,
                signType: res.signType,
                paySign: res.paySign,
                success: (res) => {
                  uni.showToast({
                    title: "支付成功",
                    icon: "none",
                  });
                  setTimeout(() => {
                    this.showSuccess = true
                    this.obj.is_buy = 1
                    this.try_see = this.obj.preview
                    this.preview = this.obj.preview
                  }, 1500);
                },
                faile: (err) => {
                  console.log(err, "err");
                },
              });
            }
            // #endif
            // #ifdef H5
            if (res.jsapi) {
              uni.requestPayment({
                provider: "wxpay",
                orderInfo: {
                  appid: res.jsapi.appId,
                  noncestr: res.jsapi.nonceStr,
                  package: res.jsapi.package,
                  // partnerid: "148*****52",
                  // prepayid: "wx202254********************fbe90000", // 统一下单订单号
                  timestamp: res.jsapi.timeStamp, // 时间戳（单位：秒）
                  sign: res.jsapi.signType, // 签名，这里用的 MD5/RSA 签名
                },
                success: (res) => {
                  uni.showToast({
                    title: "支付成功",
                    icon: "none",
                  });
                  setTimeout(() => {
                    this.showSuccess = true
                    this.obj.is_buy = 1
                  }, 1500);
                },
                faile: (err) => {
                  console.log(err, "err");
                },
              });
            }
            // #endif
          })
        }
      })
      // uni.showModal({
      //   title: "提示",
      //   content: "你的剩余旺币为：0，不足购买！是否前往充值？",
      //   showCancel: true,
      //   success: ({ confirm, cancel }) => {
      //     if (confirm) {
      //       console.log("确认");
      //       uni.navigateTo({
      //         url: "/pagesB/my/recharge",
      //       });
      //     } else {
      //       console.log("取消");
      //     }
      //   },
      // });
    },
    close() {
      this.show = false;
    },
    handleNav(url) {
      uni.navigateTo({ url: url });
    },
    handlePayType(type) {
      console.log(type, 'this.type')
      this.payType = type
    },
    handleCollect() {
      let data = { user_id: JSON.parse(uni.getStorageSync("userInfo")).id, id: this.obj.id, type: this.obj.is_collect == 1 ? 2 : 1 }
      this.schemeCollect(data).then(res => {
        if (res) {
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          })
          if (data.type == 1) {
            this.obj.is_collect = 1
          } else {
            this.obj.is_collect = 2
          }
        }
      })
    },
    detail(item) {
      uni.navigateTo({
        url: './detail?id=' + item.id
      })
    },
    handleDown() {
      if (this.type === "free" && (this.user_identity != 0 || this.user_identity != 1)) {
        uni.showToast({
          title: "开通VIP免费看完",
          icon: "none",
        });
        return;
      }
      this.show = true
    },
    handleDownLoad() {
      let data = { user_id: JSON.parse(uni.getStorageSync("userInfo")).id, scheme_id: this.obj.id }
      this.schemeDownload(data).then(res => {
        // #ifdef MP-WEIXIN
        uni.navigateTo({
          url: './doload?url=' + this.obj.url
        })
        // #endif
        // #ifdef H5
        window.location.href = this.obj.url
        // #endif
      })
    },
    showFullscreen(index) {
      this.currentIndex = index;
      this.isFullscreen = true;
    },
    closeFullscreen() {
      this.isFullscreen = false;
    },
    prevImage() {
      if (this.currentIndex > 0) this.currentIndex--;
    },
    nextImage() {
      if (this.currentIndex < this.images.length - 1) this.currentIndex++;
    }
  },
  computed: {
    currentImage() {
      if (this.obj && this.obj.preview) {
        return this.obj.preview[this.currentIndex];
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.pop-flex {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;

  ::v-deep.u-textarea {
    font-size: 23rpx;
    background: #f2f2f2;
    border-radius: 16rpx;
    width: 558rpx;
    margin-left: 16rpx;
  }

  .send {
    width: 125rpx;
    height: 69rpx;
    line-height: 69rpx;
    background: #ffbb50;
    color: #333333;
    font-size: 26rpx;
    border-radius: 32rpx;
    text-align: center;
    margin: 0 16rpx 0 16rpx;
  }
}

.tall-list {
  padding: 16rpx;
  background: #cac7c752;
  border-radius: 8rpx;
  margin: 16rpx auto 0;

  .tall-item {
    font-size: 26rpx;
    margin-bottom: 10rpx;

    span {
      color: #f59a23;
    }
  }
}

.fullscreen-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}

.fullscreen-content {
  text-align: center;
  color: #fff;
}

.fullscreen-content img {
  max-width: 100%;
  max-height: 100%;
}

.pop-box {
  padding: 28rpx 0;
  text-align: center;

  .pop-box-title {
    text-align: center;
  }

  .gm {
    font-size: 24rpx;
    color: #797979;
    margin-top: 40rpx;

    span {
      color: #ffbb50;
    }
  }

  .pop-bottom {
    width: 92%;
    margin: 58rpx auto 0;

    .pop-bottom-btn {
      width: 160rpx;
      height: 65rpx;
      line-height: 65rpx;
      text-align: center;
      font-size: 22rpx;
      color: #ffffff;
      border-radius: 64rpx;
      background: #ffb850;
    }

    .pop-bottom-1 {
      flex: 1;
      font-size: 25rpx;
      margin-right: 20rpx;

      span {
        margin-left: 4rpx;
        background-image: linear-gradient(to right, #f59a23, #f2f2f2);
        font-size: 20rpx;
        font-style: italic;
        margin-right: 20rpx;
        padding: 2rpx 10rpx;
      }

      .wb {
        font-size: 26rpx;
        color: #aaaaaa;
      }
    }
  }

  .pop-tip {
    font-size: 25rpx;
    margin-top: 42rpx;
  }

  .pop-copy {
    color: #ffbb50;
    margin-top: 16rpx;
  }
}

.bottom-fix {
  width: 100%;
  height: 108rpx;
  display: flex;
  align-items: center;
  background: #ffffff;
  box-shadow: 0 -1rpx 5rpx rgba($color: #000000, $alpha: 0.1);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9;

  .fix-item {
    display: flex;
    align-items: center;
    font-size: 20rpx;
    color: #333333;
    position: relative;
    margin-left: 32rpx;
    font-size: 28rpx;
    color: #f59a23;

    button {
      position: absolute;
      top: 0;
      left: 0;
      width: 88rpx;
      height: 84rpx;
      opacity: 0;
    }

    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 8rpx;
    }
  }

  .fix-btn {
    width: 172rpx;
    height: 70rpx;
    border-radius: 62rpx;
    font-size: 22rpx;
    color: #ffb850;
    text-align: center;
    border: 1rpx solid #ffb850;
    line-height: 70rpx;
    margin-left: 84rpx;
  }

  .active {
    background: #ffb850;
    color: #ffffff;
    margin-left: 18rpx;
    margin-right: 27rpx;
  }
}

.slot-flex {
  margin: 32rpx auto 0;
  width: 92%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .xuan {
    width: 32rpx;
    height: 32rpx;
  }

  .slot-1 {
    display: flex;
    align-items: center;
    font-size: 26rpx;

    .ji {
      width: 90rpx;
      height: 90rpx;
    }
  }
}

.item {
  width: 694rpx;
  overflow: hidden;
  padding-bottom: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 0 5rp rgba($color: #d7d7d7, $alpha: 0.2);
  border-radius: 16rpx;
  margin: 20rpx auto 0;

  .img {
    width: 100%;
    height: 370rpx;
  }

  .item-1 {
    width: 92%;
    margin: 0 auto;
    padding-top: 16rpx;
    border-top: 1rpx solid#AAAAAA;
    display: flex;
    justify-content: space-between;

    .item-eys {
      display: flex;
      align-items: center;
      color: #aaaaaa;
      font-size: 20rpx;
      margin-right: 4rpx;

      image {
        width: 23rpx;
        height: 23rpx;
      }
    }

    .type-2 {
      font-size: 25rpx;
      font-weight: bold;

      span {
        background-image: linear-gradient(to right, #f59a23, #f2f2f2);
        font-size: 20rpx;
        font-style: italic;
        margin-right: 20rpx;
        padding: 2rpx 10rpx;
      }
    }
  }

  .item-bottom {
    width: 92%;
    margin: 0 auto;

    .title {
      font-size: 30rpx;
      padding-top: 16rpx;
    }

    .flex-1 {
      width: 92%;
      margin: 10rpx auto 0;

      span {
        font-size: 20rpx;
        border-radius: 4rpx;
        background: #facd91;
        color: #b8741a;
        padding: 2rpx 4rpx;
        margin-right: 12rpx;
      }
    }

    .flex-2 {
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      font-size: 20rpx;
      color: #7f7f7f;
      padding-bottom: 29rpx;

      image {
        width: 70rpx;
        height: 70rpx;
        margin-right: 10rpx;
      }
    }
  }
}

.flex-2 {
  width: 92%;
  margin: 40rpx auto 0;
  display: flex;
  align-items: center;

  image {
    width: 62rpx;
    height: 62rpx;
  }

  ::v-deep.u-input {
    font-size: 24rpx;
    background: #f2f2f2;
    border-radius: 32rpx;
    padding-left: 26rpx;
    width: 577rpx;
    margin-left: 26rpx;
  }
}

.box-flex {
  width: 92%;
  margin: 60rpx auto 0;
  justify-content: space-between;
  font-size: 21rpx;
  color: #aaaaaa;
}

.vip {
  width: 98%;
  height: 69rpx;
  border-radius: 12rpx;
  margin: 30rpx auto 0;
  position: relative;
  background-image: linear-gradient(to right, #ffb850, #ff8e2c, #ff6206);
  font-size: 25rpx;
  display: flex;
  align-items: center;

  image {
    width: 177rpx;
    height: 129rpx;
    position: absolute;
    top: -36rpx;
    left: 60rpx;
  }

  .vip-title {
    margin-left: 276rpx;
    color: #ffffff;
  }
}

.flex-r {
  justify-content: flex-end;
  margin-bottom: 23rpx;

  image {
    width: 18rpx;
    height: 18rpx;
    margin-right: 4rpx;
  }

  .flex-r-1-c {
    margin-left: 17rpx;
    width: 276rpx;
    height: 16rpx;
    border-radius: 32rpx;
    background: #f2f2f2;
  }
}

.dian {
  background: #ffffff;
  padding: 60rpx 0;
  justify-content: center;
  margin-top: 18rpx;
  font-size: 22rpx;
  text-align: center;
  flex-direction: column;

  .cir {
    width: 76rpx;
    height: 76rpx;
    border-radius: 50%;
    margin-bottom: 21rpx;
    justify-content: center;
  }
}

.detail-box {
  width: 100%;
  background: #ffffff;
  padding: 27rpx 0;
  margin-top: 20rpx;

  .detail-title {
    margin-left: 29rpx;
    margin-bottom: 21rpx;
  }

  .detail-img {
    width: 100%;
    margin-top: 10rpx;
  }

  .box-item {
    padding: 30rpx 0;
    width: 690rpx;
    margin: 0 auto;
    font-size: 26rpx;
    border-bottom: 1rpx solid#D7D7D7;

    span {
      background-image: linear-gradient(to right, #f59a23, #f2f2f2);
      font-size: 20rpx;
      font-style: italic;
      margin-left: 10rpx;
      padding: 2rpx 10rpx;
    }
  }

  .box {
    width: 100%;
    padding: 62rpx 0;
    background: #ffb850;
    margin-top: 4rpx;

    .box-1 {
      margin: 0 auto;
      width: 225rpx;
      height: 53rpx;
      background: #ffffff;
      color: #ffbb50;
      font-size: 23rpx;
      text-align: center;
      line-height: 53rpx;
      border-radius: 162rpx;
    }

    .box-2 {
      font-size: 23rpx;
      color: #ffffff;
      margin: 18rpx auto 0;
      text-align: center;
    }
  }
}

.top {
  width: 100%;
  background: #ffffff;
  padding: 30rpx 0;

  .top-box {
    .top-box-title {
      font-size: 30rpx;
      width: 92%;
      margin: 0 auto;
    }

    .item-eys {
      width: 92%;
      margin: 50rpx auto 0;
      display: flex;
      align-items: center;
      color: #aaaaaa;
      font-size: 20rpx;
      margin-right: 4rpx;

      image {
        width: 23rpx;
        height: 23rpx;
      }
    }

    .flex-1 {
      width: 92%;
      margin: 24rpx auto 0;

      span {
        font-size: 20rpx;
        border-radius: 4rpx;
        background: #facd91;
        color: #b8741a;
        padding: 2rpx 4rpx;
        margin-right: 12rpx;
        margin-bottom: 39rpx;
      }
    }

    .header-img {
      width: 64rpx;
      height: 64rpx;
      margin-right: 20rpx;
    }

    .flex-right {
      flex: 1;
      margin-right: 30rpx;

      .gz {
        padding: 10rpx 29rpx;
        border-radius: 126rpx;
        background: #ffffff;
        border: 1rpx solid#FFBB50;
        color: #ffbb50;
        font-size: 21rpx;
        margin-left: 30rpx;
      }

      .active {
        background: #ffbb50;
        color: #ffffff;
      }

      .flex-right-1 {
        flex: 1;
        font-size: 25rpx;
        color: #ffbb50;

        .right-1-1 {
          font-size: 23rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>